<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default}">
<head>
    <meta charset="UTF-8">
    <title>服务工单管理</title>
    <style>
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .header { display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center; }
        .filters { display: flex; gap: 10px; background: white; padding: 15px; border-radius: 8px; margin-bottom: 20px; flex-wrap: wrap; }
        .filter { min-width: 150px; }
        .filter select { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; }
        .search-bar { flex: 1; max-width: 500px; }
        .search-bar input { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; }
        .tickets-list { display: grid; gap: 15px; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); }
        .ticket { background: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .ticket-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
        .ticket-title { font-weight: bold; font-size: 16px; }
        .priority-badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; }
        .priority-high { background-color: #ffebee; color: #c62828; }
        .priority-medium { background-color: #fff8e1; color: #ff6f00; }
        .priority-low { background-color: #e8f5e9; color: #2e7d32; }
        .status-badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; margin-left: 8px; }
        .status-open { background-color: #e3f2fd; color: #0d47a1; }
        .status-in-progress { background-color: #e0f7fa; color: #006064; }
        .status-resolved { background-color: #e8f5e9; color: #2e7d32; }
        .status-closed { background-color: #f5f5f5; color: #424242; }
        .ticket-meta { margin: 10px 0; font-size: 14px; color: #666; }
        .ticket-description { margin: 10px 0; }
        .ticket-actions { display: flex; gap: 10px; margin-top: 10px; }
        .btn { padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .btn-primary { background-color: #1976d2; color: white; }
        .btn-secondary { background-color: #f5f5f5; color: #333; border: 1px solid #ddd; }
        .btn-success { background-color: #388e3c; color: white; }
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
        .modal-content { background-color: white; margin: 10% auto; padding: 20px; width: 50%; border-radius: 8px; }
        .modal-header { display: flex; justify-content: space-between; margin-bottom: 15px; }
        .modal-title { font-size: 18px; font-weight: bold; }
        .close { cursor: pointer; font-size: 20px; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="container">
            <div class="header">
                <h1>服务工单管理</h1>
                <button class="btn btn-primary" onclick="openModal('createTicketModal')">创建工单</button>
            </div>
            
            <div class="filters">
                <div class="search-bar">
                    <input type="text" placeholder="搜索工单...">
                </div>
                <div class="filter">
                    <select id="statusFilter">
                        <option value="">所有状态</option>
                        <option value="open">开放</option>
                        <option value="in-progress">处理中</option>
                        <option value="resolved">已解决</option>
                        <option value="closed">已关闭</option>
                    </select>
                </div>
                <div class="filter">
                    <select id="priorityFilter">
                        <option value="">所有优先级</option>
                        <option value="high">高</option>
                        <option value="medium">中</option>
                        <option value="low">低</option>
                    </select>
                </div>
                <div class="filter">
                    <select id="assigneeFilter">
                        <option value="">所有处理人</option>
                        <option value="1">张三</option>
                        <option value="2">李四</option>
                        <option value="3">王五</option>
                    </select>
                </div>
            </div>
            
            <div class="tickets-list">
                <!-- 工单示例 -->
                <div class="ticket">
                    <div class="ticket-header">
                        <div class="ticket-title">无法登录系统</div>
                        <div>
                            <span class="priority-badge priority-high">高优先级</span>
                            <span class="status-badge status-open">开放</span>
                        </div>
                    </div>
                    <div class="ticket-meta">
                        <div>客户: 上海科技有限公司</div>
                        <div>创建于: 2023年5月15日</div>
                        <div>处理人: 张三</div>
                    </div>
                    <div class="ticket-description">
                        客户报告无法登录系统，提示密码错误，但确认密码输入正确。需要技术支持尽快解决。
                    </div>
                    <div class="ticket-actions">
                        <button class="btn btn-primary" onclick="openModal('viewTicketModal')">查看详情</button>
                        <button class="btn btn-secondary" onclick="openModal('assignTicketModal')">分配</button>
                        <button class="btn btn-success" onclick="openModal('resolveTicketModal')">解决</button>
                    </div>
                </div>
                
                <div class="ticket">
                    <div class="ticket-header">
                        <div class="ticket-title">数据导入失败</div>
                        <div>
                            <span class="priority-badge priority-medium">中优先级</span>
                            <span class="status-badge status-in-progress">处理中</span>
                        </div>
                    </div>
                    <div class="ticket-meta">
                        <div>客户: 北京数据科技有限公司</div>
                        <div>创建于: 2023年5月14日</div>
                        <div>处理人: 李四</div>
                    </div>
                    <div class="ticket-description">
                        客户尝试导入Excel数据时出现错误。导入过程中断，需要协助检查原因并解决。
                    </div>
                    <div class="ticket-actions">
                        <button class="btn btn-primary" onclick="openModal('viewTicketModal')">查看详情</button>
                        <button class="btn btn-secondary" onclick="openModal('assignTicketModal')">重新分配</button>
                        <button class="btn btn-success" onclick="openModal('resolveTicketModal')">解决</button>
                    </div>
                </div>
                
                <div class="ticket">
                    <div class="ticket-header">
                        <div class="ticket-title">功能使用咨询</div>
                        <div>
                            <span class="priority-badge priority-low">低优先级</span>
                            <span class="status-badge status-resolved">已解决</span>
                        </div>
                    </div>
                    <div class="ticket-meta">
                        <div>客户: 广州贸易有限公司</div>
                        <div>创建于: 2023年5月12日</div>
                        <div>处理人: 王五</div>
                    </div>
                    <div class="ticket-description">
                        客户询问如何使用报表导出功能，需要指导生成自定义报表。
                    </div>
                    <div class="ticket-actions">
                        <button class="btn btn-primary" onclick="openModal('viewTicketModal')">查看详情</button>
                        <button class="btn btn-secondary" onclick="reopenTicket(3)">重新开放</button>
                        <button class="btn btn-secondary" onclick="closeTicket(3)">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 创建工单模态框 -->
        <div id="createTicketModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">创建新工单</div>
                    <span class="close" onclick="closeModal('createTicketModal')">&times;</span>
                </div>
                <form id="createTicketForm">
                    <div class="form-group">
                        <label for="customer">客户</label>
                        <select id="customer" required>
                            <option value="">选择客户</option>
                            <option value="1">上海科技有限公司</option>
                            <option value="2">北京数据科技有限公司</option>
                            <option value="3">广州贸易有限公司</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="title">标题</label>
                        <input type="text" id="title" required>
                    </div>
                    <div class="form-group">
                        <label for="description">描述</label>
                        <textarea id="description" rows="5" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="priority">优先级</label>
                        <select id="priority" required>
                            <option value="">选择优先级</option>
                            <option value="high">高</option>
                            <option value="medium">中</option>
                            <option value="low">低</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="assignee">处理人</label>
                        <select id="assignee">
                            <option value="">选择处理人</option>
                            <option value="1">张三</option>
                            <option value="2">李四</option>
                            <option value="3">王五</option>
                        </select>
                    </div>
                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary" onclick="closeModal('createTicketModal')">取消</button>
                        <button type="submit" class="btn btn-primary">创建</button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 查看工单详情模态框 -->
        <div id="viewTicketModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">工单详情：无法登录系统</div>
                    <span class="close" onclick="closeModal('viewTicketModal')">&times;</span>
                </div>
                <div class="ticket-info">
                    <div class="ticket-meta">
                        <div><strong>客户:</strong> 上海科技有限公司</div>
                        <div><strong>创建于:</strong> 2023年5月15日 10:30</div>
                        <div><strong>处理人:</strong> 张三</div>
                        <div><strong>状态:</strong> <span class="status-badge status-open">开放</span></div>
                        <div><strong>优先级:</strong> <span class="priority-badge priority-high">高</span></div>
                    </div>
                    
                    <h3>问题描述</h3>
                    <p>客户报告无法登录系统，提示密码错误，但确认密码输入正确。需要技术支持尽快解决。</p>
                    
                    <h3>处理记录</h3>
                    <div style="margin-bottom: 15px; padding: 10px; background: #f5f5f5; border-radius: 4px;">
                        <div><strong>张三</strong> (2023年5月15日 11:15)</div>
                        <p>已联系客户，正在排查问题。初步判断可能是账户被锁定。</p>
                    </div>
                    
                    <div class="form-group">
                        <label for="newComment">添加处理记录</label>
                        <textarea id="newComment" rows="3"></textarea>
                    </div>
                    
                    <div class="form-actions">
                        <button type="button" class="btn btn-primary" onclick="addComment()">添加记录</button>
                    </div>
                </div>
                
                <div class="form-actions" style="margin-top: 20px;">
                    <button type="button" class="btn btn-secondary" onclick="closeModal('viewTicketModal')">关闭</button>
                    <button type="button" class="btn btn-success" onclick="openModal('resolveTicketModal')">解决工单</button>
                </div>
            </div>
        </div>
        
        <!-- 分配工单模态框 -->
        <div id="assignTicketModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">分配工单</div>
                    <span class="close" onclick="closeModal('assignTicketModal')">&times;</span>
                </div>
                <form id="assignTicketForm">
                    <div class="form-group">
                        <label for="newAssignee">选择处理人</label>
                        <select id="newAssignee" required>
                            <option value="">选择处理人</option>
                            <option value="1">张三</option>
                            <option value="2">李四</option>
                            <option value="3">王五</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="assignNote">备注</label>
                        <textarea id="assignNote" rows="3"></textarea>
                    </div>
                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary" onclick="closeModal('assignTicketModal')">取消</button>
                        <button type="submit" class="btn btn-primary">分配</button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 解决工单模态框 -->
        <div id="resolveTicketModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">解决工单</div>
                    <span class="close" onclick="closeModal('resolveTicketModal')">&times;</span>
                </div>
                <form id="resolveTicketForm">
                    <div class="form-group">
                        <label for="resolution">解决方案</label>
                        <textarea id="resolution" rows="5" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="resolutionType">解决类型</label>
                        <select id="resolutionType" required>
                            <option value="">选择解决类型</option>
                            <option value="fixed">问题修复</option>
                            <option value="workaround">临时解决方案</option>
                            <option value="not-issue">非问题</option>
                            <option value="duplicate">重复工单</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="timeSpent">处理时间 (分钟)</label>
                        <input type="number" id="timeSpent" min="1">
                    </div>
                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary" onclick="closeModal('resolveTicketModal')">取消</button>
                        <button type="submit" class="btn btn-success">解决并关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script>
            // 模态框处理
            function openModal(modalId) {
                document.getElementById(modalId).style.display = 'block';
            }
            
            function closeModal(modalId) {
                document.getElementById(modalId).style.display = 'none';
            }
            
            // 工单操作
            function reopenTicket(id) {
                if (confirm('确定要重新开放此工单吗？')) {
                    console.log('重新开放工单:', id);
                    // 实现重新开放逻辑
                }
            }
            
            function closeTicket(id) {
                if (confirm('确定要关闭此工单吗？')) {
                    console.log('关闭工单:', id);
                    // 实现关闭逻辑
                }
            }
            
            function addComment() {
                var comment = document.getElementById('newComment').value;
                if (comment.trim()) {
                    console.log('添加处理记录:', comment);
                    // 实现添加记录逻辑
                    document.getElementById('newComment').value = '';
                }
            }
            
            // 表单提交
            document.getElementById('createTicketForm').addEventListener('submit', function(e) {
                e.preventDefault();
                // 处理创建工单逻辑
                closeModal('createTicketModal');
            });
            
            document.getElementById('assignTicketForm').addEventListener('submit', function(e) {
                e.preventDefault();
                // 处理分配工单逻辑
                closeModal('assignTicketModal');
            });
            
            document.getElementById('resolveTicketForm').addEventListener('submit', function(e) {
                e.preventDefault();
                // 处理解决工单逻辑
                closeModal('resolveTicketModal');
            });
            
            // 过滤器处理
            document.getElementById('statusFilter').addEventListener('change', filterTickets);
            document.getElementById('priorityFilter').addEventListener('change', filterTickets);
            document.getElementById('assigneeFilter').addEventListener('change', filterTickets);
            
            function filterTickets() {
                // 实现过滤逻辑
                console.log('过滤工单...');
            }
        </script>
    </th:block>
</body>
</html> 